<!-- 工作信息 -->
<template>
  <el-form ref="form" :model="detail" :rules="rules" label-width="100px">
      <el-form-item label="职业信息" prop="occupation">
        <el-select v-model="detail.occupation">
          <el-option v-for="dict in dictsOccupation" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictLabel" />
        </el-select>
      </el-form-item>
      
    <el-form-item label="月收入区间" prop="monthIncome" >
      <el-select  v-model="detail.monthIncome">
        <el-option  
        v-for="item in options"
        :key="item.value"
        :label="item.label"
         :value="item.value">
        </el-option>
    </el-select>

    </el-form-item>
  
      <el-form-item>
        <el-button type="primary" size="mini" @click="submit">保存</el-button>
        <el-button type="danger" size="mini" @click="close">关闭</el-button>
      </el-form-item>
    </el-form>
  </template>
    
  <script>

  import {getUserDetail,updateUserDetailProfile} from "@/api/credit/creUser";

  
  export default {
    name: "",
    components: { updateUserDetailProfile, getUserDetail },
    props: {
      user: {
        type: Object
      },
      percentage:{
      type: Number
    }
    },
    data() {
      return {
        detail: [],
        dictsOccupation: '',
        options: [{
          value: 1,
          label: '5000以下'
        }, {
          value: 2,
          label: '5千-1万'
        }, {
          value: 3,
          label: '1万-2万'
        }, {
          value: 4,
          label: '2万以上'
        }],
        value: '',
        // userid: 0,
        // 表单校验
        rules: {
            occupation: [
          { required: true, message: "职业信息不能为空", trigger: "blur" }
        ],
        monthIncome: [
          { required: true, message: "月收入信息不能为空", trigger: "blur" }
        ]
        }
      };
    },
    created() {
        this.getDicts('cre_occupation').then(res => {
          this.dictsOccupation = res.data
        })
    },
    methods: {
    findUserDetail() {
      getUserDetail(this.user.userId).then(res => {
        this.detail = res.data
        this.percentageInitialization()
      }).catch()
    },
      submit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUserDetailProfile(this.detail).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.increase()
            });
          }
        });
      },
      close() {
        this.$tab.closePage();
      },
      increase() {
        console.log(this.percentage);
        if (this.percentage > 100) {
          this.percentage = 100;
        }
        this.$emit('increase',this.percentage);
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      },
      percentageInitialization() {
      this.percentage = 0
      if (this.user.phonenumber) {
        this.percentage += 5
      }
      if (this.user.email) {
        this.percentage += 5
      }
      if (this.user.sex != "2") {
        this.percentage += 5
      }
      if (this.detail.realName) {
        this.percentage += 5
      }
      if (this.detail.identityCard) {
        this.percentage += 5
      }
      if (this.detail.educationLevel) {
        this.percentage += 5
      }
      if (this.detail.bankCard) {
        this.percentage += 5
      }
      if (this.detail.occupation) {
        this.percentage += 5
      }
      if (this.detail.monthIncome) {
        this.percentage += 5
      }
      if (this.detail.address) {
        this.percentage += 5
      }
      if (this.detail.houseCertificate) {
        this.percentage += 5
      }
      if (this.detail.emergencyPhone) {
        this.percentage += 5
      }
      if (this.detail.password) {
        this.percentage += 5
      }
      if (this.user.userName) {
        this.percentage += 5
      }
    }

  },
  watch: {
    user: function (newData, oldData) {
      console.log(oldData, newData);
      this.findUserDetail()
    },
    percentage:function(newData,oldData){
      console.log(oldData, newData);
      this.percentage=newData
    }
  }
  };
  </script>
    